<template>
    <div class="yu-wrap">
        <div class="left">
            <ul>
                <li v-for="(item,index) in list" @click="change(index)" :class="{'nav-active':ind===index}">
                    {{item.title}}
                </li>
            </ul>
        </div>
        <div class="right">
            <div class="yu-btns" v-if="list.length && uid != list[0].uid">
                <el-button @click="addFollow">{{isFollow?'取消关注':'添加关注'}}</el-button>
                <el-button @click="addCollect">添加收藏</el-button>
            </div>
            {{list.length && list[ind].con}}
        </div>
    </div>
</template>
<script>
import $api from '../../api/index'
export default {
    created(){
        $api.getWords(this.$route.query.id).then(res => {
            console.log(res);
            if(res.code === 1){
                this.list = res.data;           
                if(this.uid != this.list[0].uid){
                    //才进行查询此人是否被关注
                    this.isFollowFun();
                } 
            }
        })
        
    },
    data(){
        return {
            list:[],
            ind:0,
            uid:localStorage.getItem('uid'),
            isFollow:false,
            id:'' //关注的id
        }
    },
    methods:{
        change(ind){
            this.ind = ind;
        },
        //获取是否关注
        isFollowFun(){
            $api.isFollow(this.list[0].uid).then(res => {
                console.log("=======",res);
                if(res.code === 1){
                    //此人已被关注
                    this.isFollow = true;
                    this.id = res.id
                }
            })
        },
        //添加关注
        addFollow(){
            //区分添加关注还是取消关注
            if(this.isFollow){
                //取消关注 id是关注列表的id
                $api.cancelFollow(this.id).then(res => {
                    console.log(res);
                    if(res.code === 1){
                        this.isFollow = false;
                        this.id = '';
                    }
                })
            }else{
                //添加关注 关注人员的id
                $api.addFollow(this.list[0].uid).then(res => {
                    console.log(res);
                    if(res.code === 1){
                        this.$message({
                            message: '关注成功',
                            type: 'success'
                        });   
                        this.isFollow = true; 
                        this.id = res.id;
                    }
                })
            }
            
        },
        //添加收藏
        addCollect(){

        }
    }
}
</script>
<style lang="scss">
    .yu-wrap{
        display: flex;
        width:100%;
        height: 100%;
        .left{
            width:200px;
            height: 100%;
            border-right:1px solid gray;
            li{
                width:100%;
                height: 40px;
                line-height: 40px;
                text-align: center;
                border-bottom:1px solid gray;
            }
        }
    }
    .nav-active{
        color:red;
    }
</style>
